<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="nve">
        <a href="#/home">one</a>
        <a href="#/server">two</a>
        <a href="#/mine">three</a>
    </div>
    <div class="content"></div>

</body>

</html>
<script>
    // 单页面路由
    // 1.整个应用只是用一个HTML文档
    // 2.单页面路由——随着url地址的变化，动态更新网页（HTML文档）的内容

    // 前端路由
    // 1.前端路由中，主要关注的是url地址的变化和对应资源的关系
    // 2.一般由前端程序员维护


    // hash路由(获取hash    location.hash)
    // 监听url地址的改变(window.onhashchange)
    // 思路：用hashchang事件，监听Url地址中hash值的变化，只要用hash值发生变化hashchang的回调函数就
    // 会执行，在回调函数内部获取最新的hash值，（location.hash），使用switch或if判断，根据不同的hash值
    // 调用不同的函数，完成内容的渲染

    window.onhashchange = function () {
        switch (location.hash) {
            case '#/home': home_page(); break;
            case '#/server': server_page(); break;
            case '#/mine': mine_page(); break
        }
    }

    function home_page() {
        document.querySelector('.content').innerHTML = 'one的内容'
    }
    function server_page() {
        document.querySelector('.content').innerHTML = 'two的内容'
    }
    function mine_page() {
        document.querySelector('.content').innerHTML = 'therr的内容'
    }
</script>